<template>
  <el-dialog v-model="saleDialogFormVisible" title="销售出库" width="500">
    <el-form :model="saleForm">
      <el-form-item label="产品类别">
        <el-input
          v-model="form.typeid"
          autocomplete="off"
          disabled
          style="width: 70%"
          :value="selectedName"
        />
        &nbsp;&nbsp;
        <el-button @click="chooseFormVisible = true">选择类别</el-button>
      </el-form-item>
      <el-form-item label="销售单价">
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="销售数量">
        <el-input v-model="form.number" autocomplete="off" />
      </el-form-item>
      <!-- 管理员选择下拉框 -->
      <div v-if="adminboole">
        <el-form-item label="选择管理员">
          <el-dropdown
            ref="dropdown1"
            trigger="contextmenu"
            style="margin-right: 30px"
          >
            <span class="el-dropdown-link" @click="showClick">
              {{ selectedAdmin.name || "选择管理员" }}
            </span>
            <template #dropdown>
              <el-dropdown-item
                v-for="(item, index) in adminArray"
                :key="index"
                @click="selectAdmin(item)"
              >
                {{ item.name }}
              </el-dropdown-item>
            </template>
          </el-dropdown>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button @click="addClick">提交审核</el-button>
      </div>
    </template>
  </el-dialog>
  <Choose
    v-model:chooseFormVisible="chooseFormVisible"
    @refreshTable="initTableData"
    v-model:selectedName="selectedName"
    v-model:currentNodeKey="currentNodeKey"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage, DropdownInstance } from "element-plus";
import http from "../../../../util/http.js";
import { defineProps, defineEmits } from "vue";
import { format } from "date-fns";
import Choose from "./choose.vue";
// 选择类别功能
const chooseFormVisible = ref(false);
// 自定义属性
const props = defineProps({
  saleFormVisible: Boolean,
});
// 自定义事件
const emit = defineEmits(["update:saleFormVisible", "refreshTable"]);

const saleDialogFormVisible = ref(props.saleFormVisible);
const administrators = ref(true);
const selectedName = ref();
const currentNodeKey = ref();
// 表单属性
const form = ref({
  price: "",
  number: "",
  selectedName: "",
});
// 监听props.saleFormVisible变化
watch(
  () => props.saleFormVisible,
  (newVal) => {
    saleDialogFormVisible.value = newVal;
  }
);

// 监听props.saleDialogFormVisible
watch(saleDialogFormVisible, (newVal) => {
  if (!newVal) {
    emit("update:saleFormVisible", false);
  }
});

// 打开下拉框
const dropdown1 = ref<DropdownInstance>();
function showClick() {
  if (!dropdown1.value) return;
  dropdown1.value.handleOpen();
}
// 管理员判断
const adminboole = ref(false);
const adminArray = ref();
// 选择管理员
const selectedAdmin = ref({
  id: "",
  name: "",
  account: "",
});
// 用户姓名Id
const selectedRole = ref({
  id: "",
  account: "",
});
const selectAdmin = (item) => {
  selectedAdmin.value = item;
};
// 获取管理员
const getAdmin = () => {
  http
    .post("/aggregation/getadmin")
    .then((res) => {
      let result = res.data.rows;
      adminArray.value = result.map((row) => {
        return {
          name: row.name,
          id: row.id,
          account: row.account,
        };
      });

      if (result.length > 1) {
        adminboole.value = true;
      }
    })
    .catch((error) => {
      ElMessage.error("加载数据失败：" + error);
    });
};
// 获取提交姓名id
const token = localStorage.getItem("token");
const getrole = () => {
  http
    .post("/aggregation/aggregationrole", { token })
    .then((res) => {
      const result = res.data.userrows;
      selectedRole.value = result;
    })
    .catch((error) => {
      ElMessage.error("加载数据失败：" + error);
    });
};
// 获取时间
const now = ref(new Date());
const formattedDate = ref("");
// 关闭按钮
const closeDialog = () => {
  saleDialogFormVisible.value = false;
  emit("update:saleFormVisible", false);
};
// 提交功能
const addClick = () => {
  const addform = {
    typeid: currentNodeKey.value,
    price: form.value.price,
    number: form.value.number,
    creater: selectedRole.value.account,
    createrid: selectedRole.value.id,
    adminid: selectedAdmin.value.id,
    ordertype: "2",
    createdate: formattedDate.value,
    status: "1",
  };
  http.post("/aggregation/addprodectorder", addform).then((res) => {
    // 将字符串转换为数字
    const price = Number(form.value.price);
    const number = Number(form.value.number);

    // 检查价格和数量是否超过最大值
    if (price > 100000 || number > 100000) {
      ElMessage.warning("最大值限制不能超过100000");
      return;
    }
    if (
      form.value.price != "" &&
      form.value.number != "" &&
      currentNodeKey.value != ""
    ) {
      saleDialogFormVisible.value = false;
      ElMessage.success("添加成功");
      closeDialog();
    } else {
      ElMessage.warning("未填写内容");
    }
  });
};
onMounted(() => {
  getAdmin();
  getrole();
  // 使用 date-fns 格式化
  formattedDate.value = format(now.value, "yyyy-MM-dd HH:mm:ss");
});
</script>
<style scoped>
:deep .el-form-item__label {
  justify-content: flex-start;
  width: "1px";
}
</style>